import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import "./index.css"

export default class List extends Component {
    state = {
        stateObj: {
            isFirst:true,
            isLoading:false,
            userList: [],
            err:""
        }
    }
    componentDidMount(){
        this.token = PubSub.subscribe("atguigu",(_,stateObj)=>{
            this.setState({stateObj})
        })
        console.log(this.token)
    }
    conponemtDidUnmount(){
        PubSub.unsubscribe(this.token)
    }
    render() {
        const { userList, isFirst, isLoading, err } = this.state.stateObj
        return (
            <div className="row">
                {
                    isFirst ? "欢迎使用 输入关键词搜索" : 
                    isLoading ? "Loading..." : 
                    err ? <h3 style={{color:"red"}}>{err}</h3> :
                    userList.map(item => {
                        return (
                            <div className="card" key={item.id}>
                                <a rel="noreferrer" href={item.html_url} target="_blank">
                                    <img alt="head_portrait" src={item.avatar_url} style={{ width: '100px' }} />
                                </a>
                                <p className="card-text">{item.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
